<template>
  <section class="music-home-wrap">
    <!-- 骨架屏 -->
    <vue-skeleton :row="6" :loading="pageLoading"/>

    <!--搜索框-->
    <div class="search-song-wrap flex flex-align flex-justify" @click="toSearch">
      <van-icon name="search" class="search-icon"/>
      <span>搜索</span>
    </div>

    <!--音乐频道-->
    <div class="music-broad-wrap">
      <div class="broad-wrap">
        <p class="broad-title">{{musicBroadList.title}}</p>
        <div class="broad-item">
          <!--公共频道-->
          <div class="channel-item text-center" v-for="(item,index) in musicBroadList.channellist" :key="index"
               @click="queryBroadDetail(item.ch_name)">
            <img :src="item.thumb" alt="" class="channel-icon">
            <p>{{item.name}}</p>
          </div>
        </div>
      </div>
    </div>

    <!--音乐榜单-->
    <div class="music-rankings-wrap">
      <h2 class="rankings-title">榜单</h2>
      <div class="rankings-item flex" v-for="(item,index) in musicRankings" :key="index"
           @click="getRankingsDetail(item)">
        <p class="rankings-img">
          <img :src="item.pic_s192" alt="">
        </p>
        <div class="rankings-info">
          <!--榜单名称-->
          <p class="rankings-name">{{item.name}}</p>
          <!--榜单推荐前几首歌-->
          <div v-if="item.content">
            <p class="recommend text-overflow" v-for="song in item.content" :key="song.song_id">{{song.title}}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 页面底部导航 -->
    <tabbar-com tabbar-name="music"/>
  </section>
</template>

<script lang="ts">
  import {Component, Vue} from "vue-property-decorator";
  import {Icon} from "vant";

  import TabbarCom from "@/components/tabbar.vue";

  @Component({
    components: {
      TabbarCom,
      [Icon.name]: Icon,
    }
  })
  export default class Music extends Vue {
    private pageLoading: boolean = false;

    // 音乐电台
    private musicBroadList: object[] = [];

    // 音乐榜单
    private musicRankings: object[] = [];

    mounted() {
      // 获取音乐电台
      this.getMusicBroad();
      // 音乐排行榜
      this.getRankings();
    }

    // 点击去搜索歌曲
    toSearch() {
      this.$router.push({
        path: "/searchMusic"
      });
    }

    // 获取音乐电台
    getMusicBroad() {
      this.$api.get("/musicBroadcasting", {}, "baseUrl2")
        .then((res: any) => {
          if (res) {
            this.musicBroadList = res[0];
          }
        })
        .catch(e => {
          this.$toast(e.msg);
        })
        .finally(() => {
        });
    }

    // 点击查询电台详情
    queryBroadDetail(channelName) {
      this.$router.push({
        path: "/musicChannel",
        query: {channelName}
      });
    }

    // 音乐排行榜
    getRankings() {
      this.$api.get("/musicRankings", {}, "baseUrl2")
        .then((res: any) => {
          if (res && res.length) {
            this.musicRankings = res;
          }
        })
        .catch(e => {
          this.$toast(e.msg);
        })
        .finally(() => {
        });
    }

    // 音乐排行榜详情
    getRankingsDetail(item) {
      this.$store.commit("GETMUSICRANKINGS", {
        bg_pic: item.bg_pic,
        comment: item.comment,
        name: item.name,
        pic_s444: item.pic_s444,
        type: item.type
      });

      this.$router.push({
        path: "/rankings",
        query: {type: item.type}
      });
    }

  }
</script>

<style lang="scss">
  .music-home-wrap {
    padding: 16px 0 50px;
    .search-song-wrap {
      height: 28px;
      margin: 0 10px;
      color: #fff;
      font-size: 12px;
      text-align: center;
      background: #2ddd86;
      border-radius: 99px;
      .search-icon {
        margin-right: 4px;
      }
    }

    .music-broad-wrap {
      width: 100%;
      background: #f4f4f4;
      padding: 10px 0;
      margin: 10px 0;
      .broad-wrap {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
        .broad-title {
          color: #0e75b6;
          font-size: 15px;
          font-weight: bold;
          padding-left: 16px;
        }
        .broad-item {
          white-space: nowrap;
          overflow-x: scroll;
          .channel-item {
            display: inline-block;
            width: 60px;
            padding: 15px 0 0 0;
            &:last-child {
              margin-right: 0;
            }
            .channel-icon {
              width: 40px;
              height: 40px;
              border-radius: 50%;
            }
          }
        }
      }


    }

    .music-rankings-wrap {
      padding: 0 16px;
      .rankings-title {
        padding: 10px 0;
      }
      .rankings-item {
        margin-bottom: 10px;
        .rankings-img {
          width: 100px;
          height: 100px;
          flex-shrink: 0;
          margin-right: 10px;
          border-radius: 4px;
          overflow: hidden;
          img {
            width: 100%;
          }
        }
        .rankings-info {
          width: calc(100% - 110px);
          .rankings-name {
            color: #333;
            font-size: 14px;
            font-weight: bold;
          }
          .recommend {
            color: #444;
            font-size: 12px;
            padding: 2px 0;
          }
        }
      }
    }

  }
</style>

